<template>
	<div class="card-2">
		<div class="head">
			<div class="icon">
				<img :src="item.icon" alt="" />
			</div>
			<div class="dot" :style="{ background: statusColorMap[Number(item.status)] }"></div>
		</div>
		<div class="title" :title="item.name">{{ item.name }}</div>
		<div class="desc" :title="item.desc">{{ item.desc }}</div>
		<div class="status">
			<span class="label">设备状态</span>
			<span class="value" :style="{ color: statusColorMap[Number(item.status)] }">{{ statusMap[Number(item.status)] }}</span>
		</div>
		<div class="active">
			<el-button :disabled="item.report_type == 2" class="active-button" @click="clickBtns({ flag: '开始检测', item })">开始检测</el-button>
		</div>
		<pagePop ref="pagePop" @handleClose="handleClose"></pagePop>
	</div>
</template>

<script>
import pagePop from '@/components/common/pagePop';
import WebSocketService from '@/utils/websocket'; // 引入我们封装的插件
export default {
	name: 'fileName',
	components: {
		pagePop
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		},
		info: {
			type: Object,
			default: () => {
				return { op_user_info: {} };
			}
		},
		userInfo: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},

	data() {
		return {
			// 1-正常(就绪)，2-离线
			// status 设备状态 1-正常,检测生成报告 2-正常，上传报告 3-离线
			statusMap: {
				1: '正常',
				2: '正常',
				3: '离线'
			},
			statusColorMap: {
				1: '#21c55d',
				2: '#21c55d',
				3: '#999'
			}
		};
	},
	computed: {},
	mounted() {},
	beforeDestroy() {},
	methods: {
		handleClose(){
			this.$parent.init();
		},
		clickBtns({ flag, item }) {
			if (flag == '开始检测') {
				if (item.device_type == 1) {
					// 足底扫描仪
					this.$socket.close();
					this.$socket.connect('ws://127.0.0.1:1596/XsolWebRunScanner');
					this.$socket.on('open', () => {
						this.$socket.send('start');
					});
				}
				if (item.device_type == 2) {
					// 全足扫描仪
					this.$socket.close();
					this.$socket.connect('ws://127.0.0.1:1597/XpodWebRunScanner');
					this.$socket.on('open', () => {
						this.$socket.send('start');
					});
				}

				this.$refs.pagePop.init({ ...item, info: this.info });
				return;
			}
		}
	}
};
</script>

<style scoped lang="less">
.card-2 {
	flex-shrink: 0;
	width: 314px;
	height: 316px;
	padding: 25px;
	background: #ffffff;
	border-radius: 10px;
	.head {
		display: flex;
		justify-content: space-between;
		.icon {
			height: 84px;
			img {
				object-fit: contain;
				height: 100%;
			}
		}
		.dot {
			width: 12px;
			height: 12px;
			background: #21c55d;
			border-radius: 50%;
		}
	}

	.title {
		font-weight: bold;
		font-size: 18px;
		color: #333333;
		line-height: 25px;
		text-align: left;
		font-style: normal;
		.line-1();
	}
	.desc {
		margin-top: 11px;
		height: 40px;
		font-weight: 500;
		font-size: 14px;
		color: #333333;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		.line-2();
	}
	.status {
		display: flex;
		justify-content: space-between;
		margin-top: 17px;
		padding-bottom: 16px;
		border-bottom: 1px solid #ececec;
		.label {
			font-weight: 500;
			font-size: 14px;
			color: #333333;
			font-style: normal;
		}
		.value {
			font-weight: 500;
			font-size: 14px;
			color: #21c55d;
			text-align: left;
			font-style: normal;
		}
	}
	.active {
		margin-top: 18px;
		.active-button {
			width: 263px;
			height: 35px;
			background: #fc5f10;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 14px;
			color: #ffffff;
			// line-height: 1;
			font-style: normal;
		}
		.active-button[disabled] {
			background: #666;
		}
	}
}
</style>
